<template>
	<view>
		<view class="image" v-if="imagePath.length > 0">
			<image :src="imagePath[0]" mode=""></image>
		</view>

		<button class="submit-btn" type="primary" @click="submit" v-if="imagePath.length === 0">开始点名</button>
		<button class="submit-btn" type="primary" @click="start" v-if="imagePath.length > 0">提交</button>
		<button class="submit-btn" type="default" @click="reset" v-if="imagePath.length > 0">重新选择</button>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				imagePath: [],
				className: ''

			}
		},
		methods: {
			submit() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.imagePath = res.tempFilePaths;
					}
				})
			},
			start() {
				this.$store.commit('changeList', this.className);
				uni.showLoading({
					title: '图片解析中...'
				})
				setTimeout(() => {
					uni.hideLoading();
					uni.switchTab({
						url: '../index/index'
					})
				}, 2000)
			},
			reset() {
				this.imagePath = [];
			}
		},
		onLoad(option) {
			this.className = option.className;
		}
	}
</script>

<style scoped>
	page {
		background-color: white;
	}

	.koulin {
		text-align: center;
		font-size: 25px;
		font-weight: 500;
	}

	.uni-input {
		padding: 8px;
		width: 90%;
		margin: 0 auto;
		margin-top: 20px;
		font-weight: 500;
		font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
	}

	.uni-input-s {
		border-bottom: 1px solid lightgreen;
	}

	>>>.uni-icons {
		float: right;
	}

	.input-box {
		width: 80%;
		margin: auto;
		margin-top: 40px;
		box-sizing: border-box;
	}

	.input-box input {
		/* border: 1px solid red; */
		opacity: 0;
		color: white;
	}

	.items {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.cursor {
		width: 2px;
		height: 40px;
		background-color: #0c8;
		animation: focus 2s infinite;
	}

	@keyframes focus {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.item {
		display: flex;
		align-items: center;
		flex-direction: row;
		justify-content: center;
		width: 60px;
		height: 60px;
		border: 1px solid green;
		border-radius: 10px;
		text-align: center;
		line-height: 70px;
		font-size: 30px;
	}

	.submit-btn {
		margin-top: 30px;
		width: 90%;
	}

	.image {
		text-align: center;
		margin-top: 20px;
	}

	.image image {
		width: 90%;
	}
</style>
